<template>
  <uv-tabbar
    :value="props.modelValue"
    :border="props.border"
    :fixed="props.fixed"
    :z-index="props.zIndex"
    :placeholder="props.placeholder"
    :active-color="props.activeColor"
    :inactive-color="props.inactiveColor"
    :safe-area-inset-bottom="props.safeAreaInsetBottom"
    @change="activeChange"
  >
    <template v-for="(tab, index) in list" :key="index">
      <uv-tabbar-item :text="tab.text" :icon="tab.icon" :name="tab.name" />
    </template>
  </uv-tabbar>
</template>

<script lang="ts" setup>
import type { TabbarInfo } from '../types'
type Props = {
  list: TabbarInfo[];
  modelValue: string;
  safeAreaInsetBottom?: boolean;
  border?: boolean; // 是否显示上方边框
  zIndex?: number;
  activeColor?: string; // 选中标签的颜色
  inactiveColor?: string; // 未选中标签的颜色
  fixed?: boolean; // 是否固定在底部
  placeholder?: boolean; // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
};

const props = withDefaults(defineProps<Props>(), {
  safeAreaInsetBottom: true,
  border: false,
  zIndex: 1,
  fixed: true,
  placeholder: true,
})

type Emit = {
  (ev: 'update:modelValue', active: string): void;
};
const emit = defineEmits<Emit>()

function activeChange (name: string | number) {
  emit('update:modelValue', name)
}
</script>

<style lang="scss" scoped>
</style>
